 <template>
    <div id="app">
      <div id="header" style="background-color: #F6F6F6;width: 100%;height: 35px;border-bottom: 1px solid #E7E8E7;">
          <div class="bac" style="width: 1200px;height: 35px;margin: auto">
              <div class="welcome" style="padding-top: 5px;float: left;color: gray">
                <span style="font-size: 1px;" >您好，欢迎来到培训通！</span>
                <span style="font-size: 1px;" v-if="this.token==null"> <a href=""><router-link :to="{name:'Login'}">请登录</router-link></a></span>
                <span style="font-size: 1px;" v-else>用户:{{token}}  <a href="" @click="exit()">退出登录</a> </span>
              </div>
              <div class="right" style="float: right;padding-top: 5px;color: gray">
                <span style="font-size: 1px">返回首页 |</span>
                <span style="font-size: 1px">招生服务 |</span>
                <span style="font-size: 1px">客服中心 |</span>
                <span style="font-size: 1px">网站导航</span>
              </div>
          </div>
      </div>
    </div>
  </template>
  <script>
    export default {
      name: "Header",
      props: ['inputName'],
      data(){
        return{
          data:{},
          token:'',
        }
      },
      methods:{
        findToken(){
           this.token = localStorage.getItem("username");
        },
        exit(){
          localStorage.removeItem("username")
          this.$router.push({name:'Index'})
        }
      },
      //初始化阶段 brforeCreate 内部事件 生命周期
      created(){
        this.findToken();
      }
      // watch: {
      //   inputName: function(newValue) {
      //     console.log(newValue);  //可以看到数据已经拿到
      //     /*查询所有用户*/
      //       let _this = this
      //       console.log(newValue)
      //       this.$axios.get("http://localhost:8066/user/getUserById/"+newValue).then(function(res){
      //         _this.data = res.data
      //
      //         alert(_this.token)
      //       }).catch(function (err) {
      //         // alert('查询失败')
      //       })
      //   },
      //
      // }
    }
  </script>
  <style scoped>

    .welcome a{
      text-decoration: none;
    }
    .welcome a:hover{
      color: orange;
    }
      .right span:hover{
        background-color: white;
        color: orange;
      }
  </style>

